<template>
  <div class="interface-tabs-box">
    <div class="tabs-interface">
      <el-tabs v-model="currentActiveTab" type="card"
               @dblclick="tabDblClick"
               @tab-click="tabClick"
               @tab-remove="tabRemove">
        <el-tab-pane label="接口列表" name="interfaceList" :closable="false">

        </el-tab-pane>
        <el-tab-pane v-for="item in interfaceSourceList" :key="item.id" :name="item.id" :closable="true">
          <template #label>
<!--            <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">-->
<!--              <component :is="item.icon"></component>-->
<!--            </el-icon>-->
            <el-tag size="small" effect="plain">{{ item.method }}</el-tag>
            <el-badge is-dot :hidden="false" type="warning">
              {{ item.name }}
            </el-badge>
          </template>
        </el-tab-pane>
      </el-tabs>
      <MoreButton />
    </div>
  </div>
</template>

<script setup name="interfaceCat">
import Sortable from "sortablejs";
import { ref, computed, watch, onMounted } from "vue";
import {useInterfaceStore} from '@/stores/modules/interface/interface.js'
import MoreButton from "./MoreButton.vue";
import {storeToRefs} from "pinia";

const interfaceStore = useInterfaceStore()

const {currentActiveTab,showInterfaceList,interfaceSourceList}=storeToRefs(interfaceStore)

onMounted(() => {
  tabsDrop();
});


// tabs 拖拽排序
const tabsDrop = () => {
  Sortable.create(document.querySelector(".tabs-interface .el-tabs__nav"), {
    draggable: ".el-tabs__item",
    animation: 300,
    onEnd({ newIndex, oldIndex }) {
      console.log(newIndex,oldIndex)
      console.log(currentActiveTab.value)
    }
  });
};

// Tab Click
const tabClick = (tabItem,Event) => {
  showInterfaceList.value = tabItem.props.name === "interfaceList";
};

// Tab dblClick
const tabDblClick = (tabItem,Event) => {
  console.log("db")
};

// Remove Tab
const tabRemove = (fullPath) => {

};
</script>

<style scoped lang="scss">
@import "Tabs.scss";
</style>
